<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >

      <el-form-item label="区域">
        <el-select
          v-model="formInline.region"
          placeholder="区域"
        >
          <el-option
            label="天河区"
            value="shanghai"
          ></el-option>
          <el-option
            label="越秀区"
            value="beijing"
          ></el-option>
          <el-option
                  label="荔湾区"
                  value="beijing"
          ></el-option>
          <el-option
                  label="白云区"
                  value="beijing"
          ></el-option>
          <el-option
                  label="海珠区"
                  value="beijing"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学校名">
        <el-input
                v-model="formInline.user"
                placeholder="学校名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="district"
        label="区域"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="schoolname"
        label="学校名"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="teachercount"
        label="教师数量"
      >
      </el-table-column>
      <el-table-column
        prop="bestsubject"
        label="优势学科"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="handleDelete(scope.$index, scope.row)"
          >详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

    <script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
                    district: '天河区',
                    schoolname: '华南师范大学附属中学',
                    teachercount: '287',
                    bestsubject: '物理、化学、地理'
                  }, {
                    district: '荔湾区',
                    schoolname: '广东实验中学',
                    teachercount: '287',
                    bestsubject: '物理、生物、政治'
                  }, {
                    district: '荔湾区',
                    schoolname: '广东广雅中学',
                    teachercount: '214',
                    bestsubject: '历史、生物、化学'
                  }, {
                    district: '越秀区',
                    schoolname: '广州执信中学',
                    teachercount: '243',
                    bestsubject: '物理、生物、政治'
                  },
                  {
                    district: '黄埔区',
                    schoolname: '广州市第二中学',
                    teachercount: '241',
                    bestsubject: '生物、化学、历史'
                  }, {
                    district: '海珠区',
                    schoolname: '广州市第六中学',
                    teachercount: '209',
                    bestsubject: '历史、生物、化学'
                  }, {
                    district: '白云区',
                    schoolname: '广东华侨中学',
                    teachercount: '247',
                    bestsubject: '历史、生物、化学'
                  }, {
                    district: '荔湾区',
                    schoolname: '广州市协和中学',
                    teachercount: '243',
                    bestsubject: '物理、生物、政治'
                  }]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  }
}

  </script>

  <style
    rel="stylesheet/scss"
    lang="scss"
    scoped
  >
  </style>
</template>
